<template>
	<view>
		<cu-custom v-if="isdh" bgColor="bg-gradual-fff">
			<block slot="content">首页</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<!-- <view class="cu-custom" :style="'height:'+CustomBar + 'px;'">
				<view class="cu-bar" style="z-index: 998;position: relative;" :style="'height:'+CustomBar + 'px;padding-top:'+StatusBar+'px'">
					<view class="action">
						<view class="index_a_b_a" @click="BackPage_click">
							<u-icon name="arrow-left" color="#FFFFFF" size="15"></u-icon>
						</view>
						<view class="index_a_b_a" @click="HomePage">
							<u-icon
								name="home"
								size="20"
								color="#FFFFFF"
							></u-icon>
						</view>
					</view>
					<view class="content cu-custom_text" :style="[{top:StatusBar + 'px'}]">
						首页
					</view>
				</view>
			</view> -->
			<view class="index_a">
				<u-swiper
						:list="index_banner"
						bgColor="#0B000C"
						keyName="image"
						indicator
						indicatorMode="line"
						circular
						radius='0'
						height='1500rpx'
						@click="ad_click1"
				></u-swiper>
			</view>
			<view class="l_bg">
				<view class="bor_jb1">
					<view class="l_cen1">
						<view class="l_top1">
							<view class="l_bottom1">
								<view class="index_b">
									<view class="index_b_a" @click="goPage('/pages/test_center/test_center',1)">
										<view class="index_b_a_a">
											<image :src="index_11"></image>
										</view>
										<view class="index_b_a_b">测试中心</view>
									</view>
									<view class="index_b_a" @click="goPage('/pages/curriculum/list',0)">
										<view class="index_b_a_a">
											<image :src="index_12"></image>
										</view>
										<view class="index_b_a_b">商学院</view>
									</view>
									<view class="index_b_a" @click="goPage('/pages/goods/list',0)">
										<view class="index_b_a_a">
											<image :src="index_13"></image>
										</view>
										<view class="index_b_a_b">商城</view>
									</view>
									<view class="index_b_a" @click="goPage('/pages/tutor/vendor',0)">
										<view class="index_b_a_a">
											<image :src="index_14"></image>
										</view>
										<view class="index_b_a_b">导师</view>
									</view>
									<view class="index_b_a" @click="goPage('/pages/user/user_vip',1)">
										<view class="index_b_a_a">
											<image :src="index_15"></image>
										</view>
										<view class="index_b_a_b">会员</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="index_c" :style="'background-image:url('+(index_2)+');'"></view>
			<view class="index_d">
				<swiper class="index_d_a"
					:previousMargin="previousMargin"
					:nextMargin="nextMargin"
					:autoplay="false"
					circular
					@change="store_change"
				>
					<swiper-item class="index_d_a_a" v-for="(item, index) in test_list" :key="index">
						<view class="index_d_a_a_a" @click="goPage(item.url,1)" :style="'background-image:url('+(currentIndex==index?index_22:index_21)+');'">
							<view class="index_d_a_a_a_a">
								<image :src="item.icon"></image>
							</view>
							<view class="index_d_a_a_a_b">{{item.name}}</view>
							<view class="index_d_a_a_a_cc">
								<view class="index_d_a_a_a_c">{{item.abstract}}</view>
								<view class="index_d_a_a_a_d">开始测试</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="index_e" :style="'background-image:url('+(index_3)+');'">
				<view class="index_e_a" :style="'background-image:url('+(index_31)+');'"></view>
				<view class="index_e_b">这里展示一句商学院的广告语，可以在后台设置</view>
				<view class="index_e_c">
					<view class="index_e_c_a" @click="curriculum_type_click(1)">
						视频课程
						<view class="index_e_c_a_a" v-if="curriculum_type==1"></view>
					</view>
					<view class="index_e_c_a" @click="curriculum_type_click(2)">
						线下课程
						<view class="index_e_c_a_a" v-if="curriculum_type==2"></view>
					</view>
				</view>
				<view class="index_e_d">
					<swiper class="index_e_d_a"
						:autoplay="false"
						:indicator-dots="true"
						:current="currentCurriculum"
						circular
					>
						<swiper-item class="index_e_d_a_a" @click="goPage('/pages/curriculum/info?id='+item.id,0)" v-for="(item, index) in curriculum_list" :key="index">
							<view class="index_e_d_a_a_a">
								<image :src="item.image"></image>
							</view>
							<view class="index_e_d_a_a_b">{{item.name}}</view>
							<view class="index_e_d_a_a_c">
								<view class="index_e_d_a_a_c_a" v-if="item.integral==0 && item.price>0">
									<view class="index_e_d_a_a_c_a_a"><span>￥</span>{{item.price}}</view>
									<view class="index_e_d_a_a_c_a_b">¥{{item.market_price}}</view>
								</view>
								<view class="index_e_d_a_a_c_a" v-if="item.integral==0 && item.price==0">
									<view class="index_e_d_a_a_c_a_a">免费</view>
								</view>
								<view class="index_e_d_a_a_c_a" v-if="item.price==0 && item.integral>0">
									<view class="index_e_d_a_a_c_a_a"><span>积分</span>{{item.integral}}</view>
								</view>
								<view class="index_e_d_a_a_c_a" v-if="item.price>0 && item.integral>0">
									<view class="index_e_d_a_a_c_a_a"><span>积分</span>{{item.integral}}+<span>¥</span>{{item.price}}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="index_f">
				<view class="index_f_a" :style="'background-image:url('+(index_4)+');'"></view>
				<view class="index_f_b" @click="goPage('/pages/goods/list',0)" :style="'background-image:url('+(index_5)+');'"></view>
			</view>
			<view class="index_g">
				<GoodsList :list="GoodsList"></GoodsList>
			</view>
			<view class="index_f">
				<view class="index_f_a" :style="'background-image:url('+(index_6)+');'"></view>
				<view class="index_f_b" @click="goPage('/pages/tutor/vendor',0)" :style="'background-image:url('+(index_5)+');'"></view>
			</view>
			<view class="index_g">
				<TutorList :list="tutor_list"></TutorList>
			</view>
		</view>
		<u-tabbar
			:value="value1"
			:fixed="true"
			:border="false"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			activeColor="#462981"
			inactiveColor="#9583BA"
			zIndex='99'
			@change="tabbar_change"
		>
			<u-tabbar-item text="首页" :icon="value1==0?'/static/tabbar_11.png':'/static/tabbar_1.png'" ></u-tabbar-item>
			<u-tabbar-item text="订单" :icon="value1==1?'/static/tabbar_22.png':'/static/tabbar_2.png'" ></u-tabbar-item>
			<u-tabbar-item text="购物车" :icon="value1==2?'/static/tabbar_33.png':'/static/tabbar_3.png'" ></u-tabbar-item>
			<u-tabbar-item text="我的" :icon="value1==3?'/static/tabbar_44.png':'/static/tabbar_4.png'" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>
<script>
import request from '@/common/request.js';	
import {
	paramsToStr
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:true,
			CustomBar: this.CustomBar,
			StatusBar: this.StatusBar,
			isdh:false,
			index_1:request.baseUrl_img+'/img/index_1.png',
			index_11:request.baseUrl_img+'/img/index_11.png',
			index_12:request.baseUrl_img+'/img/index_12.png',
			index_13:request.baseUrl_img+'/img/index_13.png',
			index_14:request.baseUrl_img+'/img/index_14.png',
			index_15:request.baseUrl_img+'/img/index_15.png',
			index_2:request.baseUrl_img+'/img/index_2.png',
			index_21:request.baseUrl_img+'/img/index_21.png',
			index_22:request.baseUrl_img+'/img/index_22.png',
			index_3:request.baseUrl_img+'/img/index_3.png',
			index_31:request.baseUrl_img+'/img/index_31.png',
			index_4:request.baseUrl_img+'/img/index_4.png',
			index_5:request.baseUrl_img+'/img/index_5.png',
			index_6:request.baseUrl_img+'/img/index_6.png',
			test_list:[],
			previousMargin:0,
			nextMargin:20,
			currentIndex:1,
			curriculum_type:1,
			curriculum_list:[],
			curriculum_sp:[],
			curriculum_xx:[],
			currentCurriculum:0,
			value1:0,
			uid:0,
			GoodsList:[],
			tutor_list:[],
			index_banner:[],
		}
	},
	onPageScroll: function(e) { //监听页面滚动
	     let that = this;
	     //判断你滑动的高度大于你元素距离顶部的高度值
	     if (e.scrollTop > 60){
	        //固定
		     that.isdh =true;
	     } else {
		     that.isdh = false;
	     }
	},
	onShareAppMessage(res) { //发送给朋友
		return {
			title:'爱物生',
			path:'/pages/home/vendor'
		}
	},
	onShareTimeline(res) {//分享到朋友圈
		return {
			title:'爱物生',
			path:'/pages/home/vendor'
		}
	},
	onShow(){
		this.uid=uni.getStorageSync('uid');
	},
	mounted() {
		this.home_config_post();
	},
	methods: {
		curriculum_type_click(e){
			this.curriculum_type=e;
			if(e==1){
				this.curriculum_list=this.curriculum_sp;
			}else{
				this.curriculum_list=this.curriculum_xx;
			}
			this.currentCurriculum=0;
		},
		store_change(e){
			// 当前的激活索引
			const {
				current
			} = e.detail
			let currentIndex= current+1;
			console.log(currentIndex);
			if(currentIndex==this.test_list.length){
				this.currentIndex =0;
			}else{
				this.currentIndex =currentIndex;
			}
		},
		ad_click1(e){
			let item=this.index_banner[e];
			this.ad_click(item);
		},
		ad_click(item){
			console.log(item);
			let {
				link,
				link_type,
				params,
				is_tab
			} = item;
			switch (link_type) {
				case 1:
					""
				case 2:
					if (is_tab) {
						uni.switchTab({
							url: link
						});
					} else {
						uni.navigateTo({
							url: link + paramsToStr(params)
						});
					}
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + link
					});
					break;
			}
		},
		punchtheclock(){
			if (!this.$util.isLogin()) {
				return;
			}
			let paramsList = {
				uid:this.uid
			}
			let optsList = {
				url: 'u-user_clockin',
				method: 'post'
			};
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.showToast({
				    title: res.data.msg,
					icon:'none',
				    duration: 2000
				});
			});
		},
		goPage(url,type=0) {
			if(type==1){
				if (!this.$util.isLogin()) {
					return;
				}
			}
			uni.navigateTo({
				url
			});
		},
		home_config_post(){
			let paramsList = {
				uid:this.uid
			}
			let optsList = {
				url: 'i-home',
				method: 'post'
			};
			let _this=this;
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					_this.index_banner=res.data.data.index_db_banner;
					_this.test_list=res.data.data.test_list;
					_this.curriculum_xx=res.data.data.curriculum_xx;
					_this.curriculum_sp=res.data.data.curriculum_sp;
					_this.curriculum_list=res.data.data.curriculum_sp;
					_this.GoodsList=res.data.data.goods_list;
					_this.tutor_list=res.data.data.tutor_list;
				}
				_this.showLoading=false;
			});
		},
		tabbar_change(e){
			if (e == '0') {
				uni.reLaunch({
					url: '/pages/home/vendor'
				})
				return;
			}else if (e == '1') {
				uni.reLaunch({
					url: '/pages/order/order'
				})
				return;
			}else if (e == '2') {
				uni.reLaunch({
					url: '/pages/cart/list'
				})
				return;
			}else if (e == '3') {
				uni.reLaunch({
					url: '/pages/user/info'
				})
				return;
			}
		},
	}
}
</script>

<style  lang="scss" scoped>
	.index_a{
		background-color: #FFFFFF;
		height: 1500rpx;
		width: 750rpx;
		overflow: hidden;
	}
	.l_bg{
		margin: auto;
		margin-top: -46rpx;
	}
	.index_b{
		width: 700rpx;
		height: 226rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 700rpx 226rpx;
		position: relative;
		z-index: 1;
		padding: 30rpx;
	}
	.index_b_a{
		float: left;
		width: 20%;
	}
	.index_b_a_a{
		width: 98rpx;
		height: 98rpx;
		margin: auto;
		margin-top: 20rpx;
	}
	.index_b_a_a image{
		width: 100%;
		height: 100%;
	}
	.index_b_a_b{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		margin-top: 20rpx;
	}
	.index_c{
		width: 700rpx;
		margin: auto;
		margin-top: 55rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 590rpx 50rpx;
		height: 60rpx;
	}
	.index_d{
		width: 725rpx;
		margin-left: 25rpx;
		margin-top: 40rpx;
	}
	.index_d_a{
		height: 478rpx;
	}
	.index_d_a_a{
		width: 290rpx !important;
		height: 478rpx;
	}
	.index_d_a_a_a{
		width: 280rpx;
		height: 478rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 274rpx 478rpx;
		padding-top: 50rpx;
	}
	.index_d_a_a_a_a{
		width: 128rpx;
		height: 128rpx;
		margin: auto;
	}
	.index_d_a_a_a_a image{
		width: 100%;
		height: 100%;
	}
	.index_d_a_a_a_b{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		margin-top: 20rpx;
	}
	.index_d_a_a_a_cc{
		margin-top: 95rpx;
		padding: 0 40rpx;
	}
	.index_d_a_a_a_c{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 22rpx;
		color: #CCCCCC;
		text-align: center;
		line-height: 30rpx;
	}
	.index_d_a_a_a_d{
		width: 134rpx;
		height: 40rpx;
		background: linear-gradient(0deg, #D2B5C6, #F7E2FA);
		border-radius: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 18rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: center;
		margin: auto;
		margin-top: 20rpx;
	}
	.index_e{
		width: 700rpx;
		height: 905rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 700rpx 905rpx;
		margin: auto;
		margin-top: 50rpx;
		padding-top: 50rpx;
	}
	.index_e_a{
		height: 52rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 138rpx 52rpx;
	}
	.index_e_b{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 24rpx;
		text-align: center;
		margin-top: 20rpx;
		overflow: hidden;
		line-height: 30rpx;
		padding: 0 50rpx;
		height: 60rpx;
	}
	.index_e_c{
		overflow: hidden;
		margin: auto;
		margin-top: 80rpx;
		width: 500rpx;
	}
	.index_e_c_a{
		width: 50%;
		float: left;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #462981;
		text-align: center;
		position: relative;
	}
	.index_e_c_a_a{
		width: 83rpx;
		height: 10rpx;
		background: #462981;
		border-radius: 5rpx;
		opacity: 0.2;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -40rpx;
	}
	.index_e_d{
		width: 650rpx;
		overflow: hidden;
		margin: auto;
		margin-top: 30rpx;
	}
	.index_e_d_a{
		overflow: hidden;
		height: 560rpx;
	}
	.index_e_d_a_a{
		width: 650rpx;
		overflow: hidden;
	}
	.index_e_d_a_a_a{
		width: 650rpx;
		height: 366rpx;
	}
	.index_e_d_a_a_a image{
		width: 100%;
		height: 100%;
	}
	.index_e_d_a_a_b{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #462981;
		line-height: 70rpx;
		height: 70rpx;
		overflow: hidden;   
		text-overflow:ellipsis;    
		white-space: nowrap;
		margin-top: 20rpx;
	}
	.index_e_d_a_a_c{
		overflow: hidden;
	}
	.index_e_d_a_a_c_a{
		overflow: hidden;
	}
	.index_e_d_a_a_c_a_a{
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 38rpx;
		color: #FF6000;
		line-height: 36rpx;
		float: left;
	}
	.index_e_d_a_a_c_a_a span{
		font-size: 28rpx;
	}
	.index_e_d_a_a_c_a_b{
		float: left;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #BBBBBB;
		line-height: 36rpx;
		text-decoration-line: line-through;
		margin-left: 20rpx;
	}
	.index_f{
		width: 700rpx;
		height: 50rpx;
		margin: auto;
		margin-top: 80rpx;
	}
	.index_f_a{
		width: 185rpx;
		height: 50rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 185rpx 50rpx;
		float: left;
	}
	.index_f_b{
		width: 68rpx;
		height: 50rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 68rpx 26rpx;
		float:right;
	}
	.index_g{
		margin-top: 45rpx;
		overflow: hidden;
		margin-bottom: 60rpx;
	}
</style>
